<template>
  <!--添加分享卡位 -->
  <el-dialog title="新增分享" :visible.sync="dialogVisible" :close-on-click-modal="false" @close="close" width="650px" append-to-body>
    <div class="form-box new_form_box">
      <el-form ref="form" :model="form" :inline="true" :rules="rules" label-width="60px">

        <el-form-item label="手机号" prop="tel">
          <span>{{form.tel}}</span>
        </el-form-item>
        <el-form-item label="核对状态" label-width="80px" prop="heduiState">
          <el-select clearable v-model="form.heduiState" placeholder="请选择">
            <el-option v-for="(dict, key) in commonMaps.kaweiHeduiTypeMap" :key="key" :label="dict.label" :value="key" />
          </el-select>
        </el-form-item>
        <el-form-item label="图片" prop="heduiImg" class="row">
          <uploadImageOne v-model="form.heduiImg" @change="uploadSucccess"></uploadImageOne>
        </el-form-item>

        <div class="center">
          <span >
            <el-button v-if="checkPermi(['phoneManage:heduijilu'])" @click="openJilu">核对记录</el-button>
          </span>
          <span>
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="submitForm('form')" :loading="loading">提 交</el-button>
          </span>
        </div>
      </el-form>
    </div>
    <heDuiJiLu ref="heDuiJiLu"></heDuiJiLu>
  </el-dialog>
</template>

<script>
import phoneApi from "@/api/phoneManage";
import heDuiJiLu from "./heDuiJiLu.vue";
export default {
  name: "",
  components: { heDuiJiLu },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      yunyingshangList: [],

      // 表单参数
      form: {
        id: "",
        tel: "",
        heduiImg: "",
        heduiState: "",
      },
      rules: {
        heduiState: [{ required: true, message: "请选择", trigger: "change" }],
      },
    };
  },
  created() {},
  // computed: {
  //   shopInfo() {
  //     return this.$store.getters.shopInfo;
  //   },
  // },
  methods: {
    // 打开弹窗
    open(data) {
      this.form.tel = data.tel;
      this.form.id = data.id;
      this.dialogVisible = true;
    },
    openJilu() {
      if (this.checkPermi(["phoneManage:heduijilu"])) {
        this.$refs.heDuiJiLu.open(this.form.id);
      }
    },

    // 重置
    reset() {
      this.$refs.form.resetFields();
    },
    uploadSucccess(e) {
      this.form.heduiImg = e;
    },

    async submitForm(formName) {
      this.$refs["" + formName].validate(async (valid) => {
        if (valid && this.dialogVisible) {
          this.loading = true;
          phoneApi
            .telHedui(this.form)
            .then((res) => {
              this.loading = false;
              this.$message.success(res.msg);
              this.$parent.getList();
              this.dialogVisible = false;
            })
            .catch((err) => {
              this.loading = false;
            });
        } else {
          this.$alert("请填写完整！");
        }
      });
    },

    close() {
      this.reset();
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.center {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
</style>
